import { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { enableMocking } from '@/mocks'
import App from './App.tsx'
// antd5 兼容react19
import '@ant-design/v5-patch-for-react-19'
// 样式引入
import '@icon-park/react/styles/index.css'
import './index.css'
import './styles/antd.less'
import './styles/global.less'
import './styles/variables.less'

/**
 * 初始化应用。
 * 可以直接渲染，也可以在启动Mock服务后再进行渲染调用
 */
function renderApp() {
  // React StrictMode 会在开发环境时自动执行两次渲染，以检查应用程序中是否有错误。
  // 不会影响生产构建。
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <Suspense>
      <App />
    </Suspense>
  )
}

// 启动Mock服务
// MSW 初始化不阻塞 React 渲染（适用于大多数情况，因为 MSW 是 Service Worker，即使稍晚注册也能拦截请求）
// 如果某些情况下你必须确保 MSW 初始化完成后再渲染 React，可以这么执行：enableMocking().then(() => ReactDOM)
enableMocking().then(renderApp)
